<template>
  <div class="screen-block">
    <BorderBox8>
      <div id="mainMap5" style="width: 100%; height: 100%"></div>
    </BorderBox8>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { BorderBox8 } from '@kjgl77/datav-vue3';
import * as echarts from 'echarts';
import { init, EChartsOption } from 'echarts';

const initalECharts4 = () => {
  const myChart = init(document.getElementById('mainMap5') as HTMLDivElement);
  let option: EChartsOption = {
    title: {
      show: true,
      text: '近6个月观众活跃趋势',
      x: 'center',
      textStyle: {
        //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        fontSize: 14,
        fontStyle: 'normal',
        fontWeight: 'normal',
        color: '#01c4f7',
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      data: ['观看人数、次数（个）', '场均观看数（场）'],
      textStyle: {
        fontSize: 12,
        color: '#ffffff',
      },
      top: 20,
      itemWidth: 20, // 设置宽度

      itemHeight: 12, // 设置高度

      itemGap: 10, // 设置间距
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '五月', '6月'],
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#07234d'],
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#c3dbff', //更改坐标轴文字颜色
          fontSize: 12, //更改坐标轴文字大小
        },
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#07234d'],
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#c3dbff', //更改坐标轴文字颜色
          fontSize: 12, //更改坐标轴文字大小
        },
      },
    },
    series: [
      {
        name: '观看人数、次数（个）',
        type: 'bar',
        data: [140, 170, 90, 180, 90, 90],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#9408fc' },
            { offset: 1, color: '#05aed3' },
          ]),
        },
      },
      {
        name: '场均观看数（场）',
        type: 'bar',
        data: [120, 130, 80, 130, 120, 120],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#13b985' },
            { offset: 1, color: '#dc9b18' },
          ]),
        },
      },
    ],
  };
  myChart.setOption(option);
};
onMounted(() => {
  initalECharts4();
});
</script>

<style lang="scss" scoped>
.screen-block {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
